<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="" oninput="newhand()">
</body>

</html>
<script>
    //事件抖动，一般情况下对网页中，当一个事件被频繁多次触发，就会产生抖动，最终出现页面屏弹框，频繁显示或者隐藏
    //可以借助闭包进行事件防抖,最终可以实训同一事件连续多次触发结束后只处理一次（最后一次)


    // var inp = document.querySelector('button')
    // inp.onclick = function handleInput() {
    //     console.log('输入改变');
    // }
    function handleInput() {
        console.log('输入改变');
    }



    //事件防抖
    //参数一：func最终执行的任务
    //参数二：time定时时间，以毫秒为单位
    function dobounce(func, time) {
        var jsq = null
        return function () {
            if (jsq) {
                clearTimeout(jsq)
            }
            jsq = setTimeout(() => {
                func()
            }, time)
        }
    }
    //debounce的返回值是内层闭包函敬

    var newhand = new dobounce(handleInput, 300)
</script>